<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		   
			#div1{
				width: 500px;
				height: 500px;
				background-color: aqua;
				position: relative;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: blueviolet;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			#div3{
				width: 100px;
				height: 100px;
				background-color: chocolate;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p>第一个div</p>
			<div id="div2">
				第二个div
				<div id="div3">
					第三个DIV
				</div>
			</div>
		</div>
		<button type="button" onclick="dochange()">按钮</button><br />
		用户名：<input type="text" name="username" id="" value="" /><br />
		密码：<input type="password" name="password" id="" value="" /><br />
		自我介绍：<textarea rows="" cols="" name="introduce"></textarea><br />
		<select name="fruit">
			<option value="1">苹果</option>
			<option value="2">香蕉</option>
			<option value="3">菠萝</option>
			<option value="4">橙子</option>
			<option value="5">草莓</option>
		</select>
		<button type="button" onclick="getvalue()">按钮2</button>
	</body>
	<script type="text/javascript">
		var div2obj=document.getElementById('div2')
		console.log(div2obj.parentElement.parentElement.parentElement.parentElement)
		console.log(div2obj.parentNode.parentNode.parentNode.parentNode)
		
		
		var div1obj=document.getElementById('div1')
		console.log(div1obj.children)
		console.log(div1obj.childNodes)
		
		console.log(div2obj.children)
		console.log(div2obj.childNodes)
		
		var div3Obj = document.getElementById('div3')
		console.log(div2obj.innerText )
		console.log(div2obj.innerHTML )
		
		function dochange(){
			div2obj.innerHTML='<p>新段落</p>'
		}
		function getvalue(){
			console.log(document.getElementsByName('username')[0].value);
			console.log(document.getElementsByName('password')[0].value);
			console.log(document.getElementsByName('introduce')[0].value);
			console.log(document.getElementsByName('fruit')[0].value);
			
			document.getElementsByName('username')[0].value = 'test';
			document.getElementsByName('password')[0].value = '88888';
			document.getElementsByName('introduce')[0].value = '自我介绍';
		}
		
		
		
		
		
		
	</script>
</html>
